/* flex布局 */
.box{
    width: 100px;
    height: 100px;
    background: rgb(221, 173, 85);
    text-align: center;
    border: 1px solid blanchedalmond;
}
.flex1{
    height: 300px;
    display: flex;
    justify-content: center;
    background-color: blanchedalmond;
    border: 2px dashed black;
}
.flex2{
    height: 300px;
    display: flex;
    justify-content:flex-start;
    background-color: blanchedalmond;
    border: 2px dashed black;
}
.flex3{
    height: 300px;
    display: flex;
    justify-content:flex-end;
    background-color: blanchedalmond;
    border: 2px dashed black;
}
.flex4{
    height: 300px;
    display: flex;
    justify-content:space-between;
    background-color: blanchedalmond;
    border: 2px dashed black;
}
.flex5{
    height: 300px;
    display: flex;
    justify-content:space-around;
    background-color: blanchedalmond;
    border: 2px dashed black;
}
.flex6{
    height: 300px;
    display: flex;
    justify-content:space-evenly;
    background-color: blanchedalmond;
    border: 2px dashed black;
}
.flex7{
    height: 300px;
    display: flex;
    align-items: flex-start;
    background-color: blanchedalmond;
    border: 2px dashed black;
}
.flex8{
    height: 300px;
    display: flex;
    align-items: center;
    background-color: blanchedalmond;
    border: 2px dashed black;
}
.flex9{
    height: 300px;
    display: flex;
    align-items: flex-end;
    background-color: blanchedalmond;
    border: 2px dashed black;
}
.flex10{
    height: 300px;
    display: flex;
    align-items:center;
    justify-content: center;
    background-color: blanchedalmond;
    border: 2px dashed black;
}
.flex11{
    height: 300px;
    display: flex;
    background-color: blanchedalmond;
    border: 2px dashed black;
    flex-direction: row;
}
.flex12{
    height: 300px;
    display: flex;
    background-color: blanchedalmond;
    border: 2px dashed black;
    flex-direction: row-reverse;
}
.flex13{
    height: 300px;
    display: flex;
    background-color: blanchedalmond;
    border: 2px dashed black;
    flex-direction: column;
}
.flex14{
    height: 300px;
    display: flex;
    background-color: blanchedalmond;
    border: 2px dashed black;
    flex-direction: column-reverse;
}
.flex15{
    width: 300px;
    height: 300px;
    display: flex;
    background-color: blanchedalmond;
    border: 2px dashed black;
    flex-wrap: nowrap;
}
.flex15.box{
    width: 120px;
}
.flex16{
    width: 300px;
    height: 300px;
    display: flex;
    background-color: blanchedalmond;
    border: 2px dashed black;
    flex-wrap: wrap;
}
.flex16.box{
    width: 120px;
}
.flex17{
    width: 300px;
    height: 300px;
    display: flex;
    background-color: blanchedalmond;
    border: 2px dashed black;
    flex-wrap: wrap-reverse;
}
.flex17.box{
    width: 120px;
}
.flex18{
    width: 300px;
    height: 300px;
    display: flex;
    background-color: blanchedalmond;
    border: 2px dashed black;
}
.flex18 .box:nth-child(1){
    order: 1;
}
.flex18 .box:nth-child(2){
    order: 0;
}
.flex18 .box:nth-child(3){
    order: 2;
}
.flex19{
    width: 300px;
    height: 300px;
    display: flex;
    background-color: blanchedalmond;
    border: 2px dashed black;
}
.flex19 .box:nth-child(2){
    align-self: center;
}
.flex20{
    width: 300px;
    height: 300px;
    display: flex;
    background-color: blanchedalmond;
    border: 2px dashed black;
}
.flex20 .box:nth-child(2){
    align-self: flex-end;
}



/* Grid布局 */
.grid{
    display: grid;
    width: 600px;
    height: 300px;
    background-color: blanchedalmond;
    border: 2px dashed black;
    margin: auto;
    margin-bottom: 14px;
}
.column{
    background-color: rgb(80, 167, 238);
    border-radius: 7px;
    border: 1px bisque solid;
    font-size: 18px;
    text-align: center;
}
/* grid-template-columns */
.grid1{
    grid-template-columns: repeat(3,100px);
}
.grid2{
    grid-template-columns: 1fr 1fr 1fr;
}
.grid3{
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
}
/* grid-template-areas */
.layout{
    grid-template-areas:
    "header header header"
    "aside main main"
    "footer footer footer"; 
}
.header1{
    grid-area: header;
    background-color: rgb(207, 233, 58);
    border-radius: 7px;
    border: 1px bisque solid;
    text-align: center;
}
.aside1{
    grid-area: aside;
    background-color: rgb(13, 145, 143);
    border-radius: 7px;
    border: 1px bisque solid;
    text-align: center;
}
.main1{
    grid-area: main;
    background-color: rgb(80, 167, 238);
    border-radius: 7px;
    border: 1px bisque solid;
    text-align: center;
}
.footer1{
    grid-area: footer;
    background-color: rgb(80, 238, 148);
    border-radius: 7px;
    border: 1px bisque solid;
    text-align: center;
}



/* 多列布局 */
.tttest{
    width: 600px;
    height: 200px;
    border: 2px rgb(141, 207, 233) solid;
}
.mao{
    column-count: 2;
    column-gap: 40px;
    column-rule-style: dashed;
    column-rule-color: red;
    column-rule-width: 5px;
    font-size: 1.5em;
    text-indent: 2em;
}
